<template>
	<view class="changeage">		
		<view class="changeageTop">
			<view class="v_tab">
				<text :class="['v_tab_text',type==1?'active':'']" @click="type=1">文生图</text>
				<text :class="['v_tab_text',type==2?'active':'']" @click="type=2">图生图</text>
			</view>
		</view>
		<view class="top">
			<textarea class="top_input" type="text" v-model="prompt" maxlength="-1" placeholder="请输入描述词"
				selection-start="0"> </textarea>
		</view>
		<view v-if="type==2" class="v_image" @click="onAddImgClick">
			<text class="v_image_text" v-if="!template_id">+</text>
			<text style="color: white;" v-if="!template_id">上传图片</text>
			<image :src="template_url" v-if="template_id" style="width: 100%;height: 100%;border-radius: 20rpx;"
				mode="aspectFit"></image>
		</view>
		<view class="bottom">
			<view class="item" style="margin-bottom: 20rpx;">
				<view class="item_1" @click="onTongdaoTipClick">
					<text class="t1" style="font-size: 29rpx;">生成通道</text>
					<uni-icons type="info" class="t2" size="33rpx" color="red"></uni-icons>
				</view>
				<radio-group @change="changeTongdao" class="rg">
					<label class="rg_c">
						<radio value="1" checked="true" class="ro" /><text class="tt">通道1</text>
					</label>
					<label class="rg_c">
						<radio value="2" class="ro" /><text class="tt">通道2</text>
					</label>
					<label class="rg_c">
						<radio value="3" class="ro" /><text class="tt">通道3</text>
					</label class="rg_c">
					<label class="rg_c">
						<radio value="4" class="ro" /><text class="tt">通道4</text>
					</label>
					<label v-if="type==1" class="rg_c">
						<radio value="5" class="ro" /><text class="tt" style="margin-right: 0;">通道5</text>
					</label>
				</radio-group>
			</view>
			<view class="line" v-if="type==1"></view>
			<view class="item" v-if="type==1">
				<text class="t1">生成尺寸</text>
				<view class="item2">
					<radio-group class="rg" @change="chicun=$event.detail.value">
						<label class="rg_c">
							<radio value="1" checked="true" class="ro" /><text class="tt">3:4</text>
						</label>
						<label class="rg_c">
							<radio value="2" class="ro" /><text class="tt">2:3</text>
						</label>
						<label class="rg_c">
							<radio value="3" class="ro" /><text class="tt">9:16</text>
						</label>
						<label class="rg_c">
							<radio value="4" class="ro" /><text class="tt">4:3</text>
						</label>
						<label class="rg_c">
							<radio value="5" class="ro" /><text class="tt">3:2</text>
						</label>
						<label class="rg_c">
							<radio value="5" class="ro" /><text class="tt">16:9</text>
						</label class="rg_c">
						<label class="rg_c">
							<radio value="7" class="ro" /><text class="tt" style="margin-right: 0;">1:1</text>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		
		<button class="btn" @click="startBianLian" :loading="loadding" :disabled="loadding">开始生成</button>
		<text v-if="price" class="t_price">{{price}}</text>
		<view class="tip">
			<text class="t1">温馨提示</text>
			<text class="t2">
				1、您在使用本服务时，应当遵守相关法律法规的要求以及本平台的相关服务协议，不得将本服务用于非法目的，不得利用本服务从事违法法律法规或侵犯他人合法权益的行为
				您在使用本服务时，应当确保您自身或者您应用的用户使用、上传、发布的照片、素材等信息内容，已取得相关权利人的合法授权，不存在侵犯他人肖像权、版权等合法权益的情形，亦不存在违反相关法律、法规、政策的规定以及公序良俗等情形。
				您自行对您应用中由用户使用本服务产生的内容负责，保证其不违法相关法律、法规、政策的规定以及公序良俗等。
				您违法上述要求引发的任何纠纷由您自行负责，与本平台无关。本平台有权立即停止您在本平台中的一切服务并保留追究您法律责任的权利
			</text>
		</view>
	</view>
</template>

<script>
	import {
		getUser,
		getAbilityPrice
	} from '@/src/utils/utils.js';
	
	import {
		TextImage,
		ImageToImage
	} from '@/src/api/huanlian.js';
	import {
		upload_file
	} from '@/src/utils/uni-fetch.js';
	export default {
		data() {
			return {
				prompt: null,
				loadding: false,
				price: null,
				tongdao: 1,
				chicun: 1,
				type: 1,
				template_id: null,
				template_url: null,
			};
		},
		onLoad() {
			this.init_price();
		},
		methods: {
	
			changeTongdao(v) {
				this.tongdao = v.detail.value
			},
			async init_price() {
				try {
					this.price = await getAbilityPrice('WenShengTu')
				} catch (e) {
					console.log(e)
				}
			},
			async onAddImgClick() {
				const [error, res] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed', 'original'],
					sourceType: ['album', 'camera'] //从相册选择
				});
				if (error) {
					console.error(error, error.errMsg)
					if (error.errCode == -2 || error.errCode == 0) return;
					uni.showModal({
						title: '选取图片失败',
						content: error.errMsg,
						showCancel: false
					});
					return;
				}
				try {
					let result = await upload_file({
						url: '/huanlian/up_image2/',
						file: {
							name: 'image',
							uri: res.tempFilePaths[0]
						},
						formData: {
							img_type: 1
						}
					});
					this.template_id = result.data.id;
					this.template_url = res.tempFilePaths[0];
				} catch (e) {
					if (!e) return
					uni.showModal({
						content: e.errMsg || e.message,
						showCancel: false
					});
				}
			},
			async startBianLian() {
				if (!this.prompt) {
					this.$showToast('请输入描述文字');
					return;
				}
				if (this.type == 2 && !this.template_id) {
					this.$showToast('请上传图片');
					return;
				}
				try {
					this.loadding = true
					let up_data_json = {
						prompt: this.prompt,
						tongdao: this.tongdao,
						chicun: this.chicun
					}
					let result = null
					if (this.type == 1) {
						result = await TextImage(up_data_json);
					} else {
						up_data_json["template_id"] = this.template_id
						result = await ImageToImage(up_data_json);
					}
					// getUser({}, true);
					uni.hideLoading();
					uni.navigateTo({
						url: `/src/pages/Ability/Result/Result?result_img=${encodeURIComponent(result.data.image_url)}&tip=${result.data.tip}`
					});
				} catch (e) {
					if (!e) return
					console.log(e.errMsg || e.message)
					uni.showModal({
						content: e.errMsg || e.message,
						showCancel: false
					});
				} finally {
					this.loadding = false
				}
			}
		}
	};
</script>
<style lang="scss" >
	@import 'WenShengTu.scss';
</style>

